<template>
    <div class="item-array">
        <div class="row">
            <div class="label">{{ item.message }}</div>
            <div class="list">
                <el-table :data="list" style="width: 100%">
                    <el-table-column prop="title" label="标题">
                    </el-table-column>
                    <el-table-column prop="path" label="跳转路径">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="onEdit(scope)"
                                >编辑</el-button
                            >
                            <el-button
                                type="text"
                                size="small"
                                @click="onDelete(scope)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <el-button class="btn-add" type="primary" plain @click="onAdd"
                    >添加</el-button
                >
            </div>
        </div>

        <EditorSlide
            ref="editorSlide"
            @close="onCloseEditor"
            @update="updateList"
        />
    </div>
</template>

<script>
import EditorSlide from "@/components/editorSlide/index";

export default {
    components: {
        EditorSlide
    },
    props: {
        item: {
            type: Object
        },
        dataKey: {
            type: String
        },
        proto: {
            type: Object
        }
    },
    data() {
        return {
            list: this.item.value,
            editType: "edit" // add
        };
    },
    methods: {
        updateList({ index, newValue }) {
            if (this.editType === "add") {
                console.log("数组添加");
                this.list.push(newValue);
            } else {
                console.log("修改数据");
                this.$set(this.list, index, newValue);
                this.onUpdate();
            }
        },
        onUpdate() {
            this.$emit("update", {
                key: this.dataKey,
                newValue: this.list
            });
        },
        onAdd() {
            this.editType = "add";

            // 设置默认值为null
            let row = {};
            Object.keys(this.proto).forEach(k => {
                row[k] = null;
            });
            this.onEdit({ $index: this.list.length + 1, row });
        },
        onEdit(scope) {
            const editorSlide = this.$refs.editorSlide;
            editorSlide.startEdit(this.proto, scope.$index, scope.row);
        },
        onCloseEditor() {
            this.showEditor = false;
        },
        onDelete(scope) {
            const index = scope.$index;
            this.list.splice(index, 1);
        }
    }
};
</script>

<style scoped lang="less">
.item-array {
    font-size: 16px;
    padding: 15px 0;

    .row {
        display: flex;

        .label {
            flex: 0 0 auto;
            width: 130px;
            margin-right: 10px;
        }

        .list {
            flex: 1 1 auto;
            border: 1px solid #eee;

            .btn-add {
                width: 100%;
            }
        }
    }
}
</style>
